<template>
	<div id="Home" class="safe-area-inset-top">
		<van-pull-refresh v-model="state.loading" @refresh="onRefresh">
			<van-tabs class="hometabs" v-model:active="tabsActive">
				<template #nav-right>
					<div class="home-header-extra">
						<router-link class="search" :to="{ path: '/search' }">
							<i class="ri-search-line"></i>
						</router-link>
						<router-link class="ucenter" :to="{ path: '/ucenter' }">
							<van-image
								class="user-avatar"
								round
								fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg"
							/>
						</router-link>
					</div>
				</template>
				<van-tab title="发现" />
				<van-tab title="排行" />
				<van-tab title="分类" />
			</van-tabs>

			<template v-if="tabsActive === 0">
				<div class="swiper">
					<swiper
						:autoplay="{ delay: 4000 }"
						:speed="400"
						:slidesPerView="'auto'"
						:pagination="true"
						:spaceBetween="16"
						:slidesOffsetBefore="32"
						:slidesOffsetAfter="32"
						observer
						loop
					>
						<swiper-slide
							v-for="(item, index) in swiper"
							:key="index"
							@click="goDetails"
						>
							<div class="swiper-slide-imgs">
								<img :src="item.img" />
								<img :src="item.img" class="slide-shadows" />
							</div>
							<div class="swiper-slide-text">
								<div class="swiper-slide-title">
									{{ item.title }}
								</div>
								<div class="swiper-slide-rate">
									<van-rate
										v-model="item.rate"
										readonly
										allow-half
									/>
									<span>{{ item.rate * 2 }}</span>
								</div>
								<div
									class="
										swiper-slide-desc
										van-multi-ellipsis--l2
									"
								>
									{{ item.desc }}
								</div>
								<div class="swiper-slide-extra">
									{{ item.extra }}
								</div>
							</div>
						</swiper-slide>
					</swiper>
				</div>
				<section class="block">
					<div class="block-title">热门推荐</div>
					<div class="recommend">
						<div class="scroll-view scroll-view-x">
							<van-row gutter="12">
								<van-col v-for="i in 8" :key="i">
									<item
										img="https://via.placeholder.com/112"
										title="我为邪帝"
										rate="4.7"
										watch="85000"
									/>
								</van-col>
							</van-row>
						</div>
					</div>
				</section>
				<van-tabs class="list-tabs">
					<van-tab title="人气排行">
						<div class="block">
							<item
								img="https://via.placeholder.com/112"
								title="我为邪帝"
								rate="4.7"
								watch="85000"
								label="作者: G.HO & 高孫志"
								desc="三千年前，天资绝顶的白秋然被青冥剑宗创始人青冥道人收为门徒，开始修仙之路。 三千年后，青冥道人飞升成仙…"
								extra="更新至366话"
								horizontal
								margin-bottom="24"
								v-for="i in 5"
								:key="i"
							/>
						</div>
					</van-tab>
					<van-tab title="畅销漫画">
						<van-empty description="暂无数据" />
					</van-tab>
					<van-tab title="上升最快">
						<van-empty description="暂无数据" />
					</van-tab>
				</van-tabs>
				<section class="block">
					<div class="block-title">最近更新</div>
					<div class="updata">
						<van-row gutter="16">
							<van-col :span="8" v-for="i in 6" :key="i">
								<item
									img="https://via.placeholder.com/112"
									title="我为邪帝"
									rate="4.7"
									desc="21分钟前更新"
									extra="第566话"
									margin-bottom="16"
								/>
							</van-col>
						</van-row>
					</div>
				</section>
				<section class="block">
					<div class="block-title">热门分类</div>
					<div class="classify">
						<div class="classify-block">
							<div class="classify-header">
								<h4 class="classify-title pink-color">耽美</h4>
								<a href="javascript:;">查看分类</a>
							</div>
							<div class="classify-content">
								<van-cell-group :border="false">
									<van-cell
										v-for="i in 5"
										:title="i + '. ' + '奇妙玩具来袭'"
										:key="i"
									/>
								</van-cell-group>
								<div class="classify-imgs">
									<img
										src="https://via.placeholder.com/128x200"
										alt=""
									/>
								</div>
							</div>
						</div>
						<div class="classify-block">
							<div class="classify-header">
								<h4 class="classify-title cyan-color">出版</h4>
								<a href="javascript:;">查看分类</a>
							</div>
							<div class="classify-content">
								<van-cell-group :border="false">
									<van-cell
										v-for="i in 5"
										:title="i + '. ' + '奇妙玩具来袭'"
										:key="i"
									/>
								</van-cell-group>
								<div class="classify-imgs">
									<img
										src="https://via.placeholder.com/128x200"
										alt=""
									/>
								</div>
							</div>
						</div>
						<div class="classify-block">
							<div class="classify-header">
								<h4 class="classify-title yellow-color">
									完结
								</h4>
								<a href="javascript:;">查看分类</a>
							</div>
							<div class="classify-content">
								<van-cell-group :border="false">
									<van-cell
										v-for="i in 5"
										:title="i + '. ' + '奇妙玩具来袭'"
										:key="i"
									/>
								</van-cell-group>
								<div class="classify-imgs">
									<img
										src="https://via.placeholder.com/128x200"
										alt=""
									/>
								</div>
							</div>
						</div>
						<div class="classify-block">
							<div class="classify-header">
								<h4 class="classify-title blue-color">限免</h4>
								<a href="javascript:;">查看分类</a>
							</div>
							<div class="classify-content">
								<van-cell-group :border="false">
									<van-cell
										v-for="i in 5"
										:title="i + '. ' + '奇妙玩具来袭'"
										:key="i"
									/>
								</van-cell-group>
								<div class="classify-imgs">
									<img
										src="https://via.placeholder.com/128x200"
										alt=""
									/>
								</div>
							</div>
						</div>
					</div>
				</section>
			</template>
			<template v-if="tabsActive === 1">
				<van-tabs type="card" class="hometabs-card">
					<van-tab title="总排行" />
					<van-tab title="月度排行" />
					<van-tab title="畅销排行" />
				</van-tabs>
				<div class="ranking-list">
					<div class="ranking-list-item">
						<span class="ranking-number first">1</span>
						<item
							img="https://via.placeholder.com/112"
							title="我为邪帝"
							rate="4.7"
							watch="85000"
							label="作者: G.HO & 高孫志"
							desc="三千年前，天资绝顶的白秋然被青冥剑宗创始人青冥道人收为门徒，开始修仙之路。 三千年后，青冥道人飞升成仙…"
							extra="更新至366话"
							horizontal
							margin-bottom="24"
						/>
					</div>
					<div class="ranking-list-item">
						<span class="ranking-number secondary">2</span>
						<item
							img="https://via.placeholder.com/112"
							title="我为邪帝"
							rate="4.7"
							watch="85000"
							label="作者: G.HO & 高孫志"
							desc="三千年前，天资绝顶的白秋然被青冥剑宗创始人青冥道人收为门徒，开始修仙之路。 三千年后，青冥道人飞升成仙…"
							extra="更新至366话"
							horizontal
							margin-bottom="24"
						/>
					</div>
					<div class="ranking-list-item">
						<span class="ranking-number third">3</span>
						<item
							img="https://via.placeholder.com/112"
							title="我为邪帝"
							rate="4.7"
							watch="85000"
							label="作者: G.HO & 高孫志"
							desc="三千年前，天资绝顶的白秋然被青冥剑宗创始人青冥道人收为门徒，开始修仙之路。 三千年后，青冥道人飞升成仙…"
							extra="更新至366话"
							horizontal
							margin-bottom="24"
						/>
					</div>
					<div class="ranking-list-item" v-for="i in 5" :key="i">
						<span class="ranking-number">4</span>
						<item
							img="https://via.placeholder.com/112"
							title="我为邪帝"
							rate="4.7"
							watch="85000"
							label="作者: G.HO & 高孫志"
							desc="三千年前，天资绝顶的白秋然被青冥剑宗创始人青冥道人收为门徒，开始修仙之路。 三千年后，青冥道人飞升成仙…"
							extra="更新至366话"
							horizontal
							margin-bottom="24"
						/>
					</div>
				</div>
			</template>
			<template v-if="tabsActive === 2">
				<div class="classify">
					<div class="block" v-for="i in 5" :key="i">
						<div class="classify-header">
							<h4 class="classify-title pink-color">耽美</h4>
							<a href="javascript:;">查看分类</a>
						</div>
						<div class="updata">
							<van-row gutter="16">
								<van-col :span="8" v-for="i in 6" :key="i">
									<item
										img="https://via.placeholder.com/112"
										title="我为邪帝"
										rate="4.7"
										desc="21分钟前更新"
										extra="第566话"
										margin-bottom="16"
									/>
								</van-col>
							</van-row>
						</div>
					</div>
				</div>
			</template>
		</van-pull-refresh>
	</div>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.less";
import "swiper/components/pagination/pagination.min.css";

// import Swiper core and required modules
import SwiperCore, { Autoplay, Pagination } from "swiper/core";

// install Swiper modules
SwiperCore.use([Autoplay, Pagination]);

import { defineComponent, reactive, ref } from "vue";
import item from "../components/list/item.vue";

export default defineComponent({
	components: {
		Swiper,
		SwiperSlide,
		item,
	},
	setup() {
		const tabsActive = ref(0);
		const swiper = [
			{
				img: "https://via.placeholder.com/150",
				title: "一人之下",
				rate: 4.1,
				desc: "大学生张楚岚清明回乡，遭遇神秘少女冯宝宝。素未谋面的冯宝宝却对张楚岚异常熟悉，并将其带去自己打工的快递公司。为了帮冯宝宝寻找她的身世，也为了查清自己与爷爷身上的秘密，张楚岚的生活被彻底颠覆，与冯宝宝一同踏上“异人”之旅。",
				extra: "更新至566话",
			},
			{
				img: "https://via.placeholder.com/150",
				title: "炼气练了三千年",
				rate: 3.4,
				desc: "大学生张楚岚清明回乡，遭遇神秘少女冯宝宝。素未谋面的冯宝宝却对张楚岚异常熟悉，并将其带去自己打工的快递公司。为了帮冯宝宝寻找她的身世，也为了查清自己与爷爷身上的秘密，张楚岚的生活被彻底颠覆，与冯宝宝一同踏上“异人”之旅。",
				extra: "更新至566话",
			},
			{
				img: "https://via.placeholder.com/150",
				title: "我捡起了一地属性",
				rate: 4.6,
				desc: "大学生张楚岚清明回乡，遭遇神秘少女冯宝宝。素未谋面的冯宝宝却对张楚岚异常熟悉，并将其带去自己打工的快递公司。为了帮冯宝宝寻找她的身世，也为了查清自己与爷爷身上的秘密，张楚岚的生活被彻底颠覆，与冯宝宝一同踏上“异人”之旅。",
				extra: "更新至566话",
			},
		];
		const state = reactive({
			loading: false,
		});
		const onRefresh = () => {
			setTimeout(() => {
				state.loading = false;
			}, 1000);
		};
		return {
			swiper,
			state,
			tabsActive,
			onRefresh,
		};
	},
	methods: {
		goDetails() {
			this.$router.push({
				path: '/details'
			})
		}
	},
});
</script>

<style>
.swiper-container {
	width: 100%;
	height: 200px;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
</style>
